<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../img/icon.png"/>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/business.css">
    <link rel="stylesheet" href="../img/font/iconfont.css">
</head>
<body>
    <div class="logo">
        <div class="logo-con">
            <div class="lc1">
                <a href="../index.html"><img src="../img/logo-new.png" ></a>
            </div>
            <div class="lc2">
                <img src="../img/222.png" alt="">
            </div>
        </div>
    </div>
    <nav>
        <div class="nav-con">
            <ul>
                <li><a href="#">商家入驻申请</a></li>
                <li><a href="#">商家管理中心</a></li>
                <li><a href="#">商家帮助指南</a></li>
            </ul>
        </div>
    </nav>
    <div class="banner">
        <div class="banner-con">
            <div class="apply">
                <div class="app-1">
                    <p>亲爱的：<span>XX</span>用户</p>
                </div>
                <div class="app-2">
                    <p>欢迎来到美域甄品！</p>
                </div>
                <div class="app-3">
                    <p>.若您还没填写入驻申请资料</p>
                    <p>请点击“我要入驻”进行入驻资料填写</p>
                </div>
                <div class="app-4">
                    <p>.若您的店铺还没开通</p>
                    <p>请通过“查看入驻进度”了解店铺开通的最新情况</p>
                </div>
                <div class="app-5">
                    <button>我要入驻</button>
                    <button>查看入驻进度</button>
                </div>
            </div>
        </div>
    </div>
    <div class="process">
        <div class="process-con">
            <img src="../img/entryFlow.png" alt="">
            <button>立即入驻</button>
        </div>
    </div>
    <main>
        <div class="only-pic">
            <img src="../img/check-in-guide.png" alt="">
        </div>
        <div class="main-con">
            <div class="tab">
                <ul class="btn">
                    <li class="active"><a href="#">招商方向</a></li>
                    <li><a href="">招商标准</a></li>
                    <li><a href="">供应商入驻资质</a></li>
                    <li><a href="">资费标准</a></li>
                </ul>
                <ul class="pics">
                    <!-- <li style="display: block;">新闻1</li> -->
                    <li class="show">
                        <img src="../img/1-1.png" alt="">
                    </li>
                    <li>
                        <img src="../img/investmen-s-1.png" alt="">
                        <img src="../img/investmen-s-2.png" alt="">
                        <img src="../img/investmen-s-3.png" alt="">
                        <img src="../img/investmen-s-4.png" alt="">
                    </li>
                    <li>
                        <img src="../img/qualification-1.png" alt="">
                        <img src="../img/qualification-2.png" alt="">
                        <img src="../img/qualification-3.png" alt="">
                    </li>
                    <li>
                        <img src="../img/charges-s.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <script>
        class Tab{
            constructor(){
                //选项卡 tab切换功能 伪数组，存在下标
                this.aBtn = document.querySelectorAll('.btn>li')
                this.aLi = document.querySelectorAll('.pics>li')
                this.init()
            }
            init(){
                this.change()
            }
            change(){
                //this备份
                var that = this
                //绑定事件
                for (var i = 0; i < that.aBtn.length; i++) {
                    that.aBtn[i].index = i
                    that.aBtn[i].onmouseover = function () {
                        //排他
                        for (var j = 0; j < that.aBtn.length; j++) {
                            that.aBtn[j].className = ''
                            that.aLi[j].className = ''
                        }
                        //再给它自己设置
                        this.className = 'active'
                        that.aLi[this.index].className = 'show'
                    }
                }
            }
        }
        new Tab()
    </script>
    <div class="footer-container"></div>
    <script src="../libs/jquery.min.js"></script>
    <script>
        $('.footer-container').load('footer.html')
    </script>
</body>
</html>